<template>
	<view class="detail">
		<view class="fixbg" :style="{backgroundImage:`url(${songDetail.al.picUrl})`}"></view>
		
		<Header :title='songDetail.name'/>
		
		<u-toast ref="uToast"></u-toast>
		
		<view class="scrollContainer" v-show="!loading">
			<scroll-view scroll-y="true" >
				
				<view class="detail-play">
					<image :src="songDetail.al.picUrl" :class="{'detail-play-run':isPlay}" mode=""></image>
					<text v-if="isPlay" class="iconfont" @tap='playAndPause(0)'>&#xe62c;</text>
					<text v-else class="iconfont"  @tap='playAndPause(1)'>&#xe62d;</text>
					<view></view>
				</view>
				
				<view class="detail-lyric">
					<view class="detail-lyric-wrap" :style="{transform:'translateY(' + -(lyricInd - 1)*82 + 'rpx)'}">
						<view v-for="(item,ind) in songLyric" :key='ind' class="detail-lyric-wrap-item" :class="{active:lyricInd == ind}">
							{{item.lyric}}
						</view>
					</view>
				</view>
				
				<view class="detail-like">
					<view class="detail-like-head">
						喜欢这首歌的人也听
					</view>
					
					<view class="detail-like-item" v-for="(item,ind) in songSimi" :key='ind' @tap='handleToSimi(item.id)'>
						<view class="detail-like-item-img">
							<image :src="item.album.picUrl" mode=""></image>
						</view>
						<view class="detail-like-item-song">
							<view>
								{{item.name}}
							</view>
							<view>
								<image v-if="item.privilege.flag > 60" src="../../static/dujia.png" mode=""></image>
								<image v-if="item.privilege.maxbr == 999000" src="../../static/sq.png" mode=""></image>
								{{item.album.artists[0].name}} - {{item.name}}
							</view>
						</view>
						<text class="iconfont">&#xe610;</text>
					</view>
				</view>
				
				<view class="detail-comment">
					<view class="detail-comment-head">
						精彩评论
					</view>
					<view class="detail-comment-item" v-for="(item,ind) in songComments" :key='item.commentId'>
						<view class="detail-comment-item-img">
							<image :src="item.user.avatarUrl" mode=""></image>
						</view>
						
						<view class="detail-comment-item-content">
							<view class="detail-comment-item-content-title">
								<view class="detail-comment-item-content-title-content">
									<view class="detail-comment-item-content-title-content-name">
										<view>
											{{item.user.nickname}}
										</view>
										<view>
											{{item.time | formatTime}}
										</view>
									</view>
									
								<view class="detail-comment-item-content-title-like">
									{{item.likedCount | formatCount}}<text class="iconfont">&#xe600;</text>
								</view>
								</view>
								
								<view class="detail-comment-item-content-title-text">
									{{item.content}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {baseUrl} from '../../common/config.js'
	
	export default {
		data() {
			return {
				songId:'',
				loading:true,
				songDetail:{
					name:'',
					al:{
						picUrl:''
					}
				},
				songSimi:[],
				songComments:[],
				songLyric:[],
				lyricInd:0,
				isPlay:true,
			}
		},
		onLoad(options) {
			console.log(options.songId);
			this.songId = options.songId
			this.getSongDetail(this.songId)
		},
		onUnload() {
			clearInterval(this.timer)
			// #ifdef H5
				this.bgAudioMannager.destroy()
			// #endif
		},
		onHide() {
			clearInterval(this.timer)
			// #ifdef H5
				this.bgAudioMannager.destroy()
			// #endif
		},
		methods: {
			getSongDetail(songId){
				this.loading = true
				uni.showLoading({
				    title: '正在加载中...'
				});
				
				this.$store.commit('NEXT_ID',songId)
				
				const url = {
					detail : `${baseUrl}/song/detail?ids=${songId}`,
					simi : `${baseUrl}/simi/song?id=${songId}`,
					comment : `${baseUrl}/comment/music?id=${songId}`,
					lyric : `${baseUrl}/lyric?id=${songId}`,
					play : `${baseUrl}/song/url?id=${songId}`
				}
				
				Promise.all([uni.$u.http.get(url.detail),
					uni.$u.http.get(url.simi),
					uni.$u.http.get(url.comment),
					uni.$u.http.get(url.lyric),
					uni.$u.http.get(url.play)])
					.then((res)=>{
						console.log(res);
						const flag = res.every((item)=>{
						return item.data.code == 200
					})
						if(flag) {
						this.songDetail = res[0].data.songs[0]
						this.songSimi = res[1].data.songs
						this.songComments = res[2].data.hotComments
						this.handleLrc(res[3].data.lrc.lyric)
						this.handleUrl(res[4].data.data[0].url)
						this.listenLyricIndex()
					} else {
						this.showWarning()
					}
				})
					.finally(()=>{
						uni.hideLoading()
						this.loading = false
					})
			},
			handleLrc(lrc){
				let re = /\[([^\]]+)\]([^\[]+)/g
				let result = []
				lrc.replace(re,($0,$1,$2)=>{
					result.push({'time':this.formatTimeToSec($1),'lyric':$2.replace('\n','')})
				})
				this.songLyric = result
			},
			handleUrl(url){
				if(!url) {
					this.showWarning()
					return
				}
				
				// #ifdef MP-WEIXIN
					this.bgAudioMannager = uni.getBackgroundAudioManager()
					this.bgAudioMannager.title = this.songDetail.name
				// #endif
				
				// #ifdef H5
				if(!this.bgAudioMannager) {
					this.bgAudioMannager = uni.createInnerAudioContext()
					}
					this.bgAudioMannager.title = this.songDetail.name
					this.isPlay = false
				// #endif
				
				this.bgAudioMannager.src = url
				this.bgAudioMannager.onPlay(()=>{
					this.isPlay = true
					this.listenLyricIndex()
				})
				this.bgAudioMannager.onPause(()=>{
					this.isPlay = false
					clearInterval(this.timer)
				})
				this.bgAudioMannager.onEnded(()=>{
					this.getSongDetail(this.$store.state.nextId)
				})
			},
			formatTimeToSec(value){
				let arr = value.split(':')
				return (Number(arr[0]*60) +  Number(arr[1])).toFixed(3)
			},
			playAndPause(flag){
				if(flag) {
					this.bgAudioMannager.play()
					this.isPlay = true
				} else {
					this.bgAudioMannager.pause()
					this.isPlay = false
				}
			},
			listenLyricIndex(){
				const length = this.songLyric.length
				clearInterval(this.timer)
				this.timer = setInterval(()=>{
				const currentTime = this.bgAudioMannager.currentTime
					for(let i = 0;i < length;i++) {
						if(currentTime > this.songLyric[length -1].time) {
							this.lyricInd = length - 1
							break
						}
						if(currentTime > this.songLyric[i].time && currentTime < this.songLyric[i + 1].time) {
							this.lyricInd = i
						}
					}
				},500)
			},
			handleToSimi(id){
				this.getSongDetail(id)
			},
			showWarning() {
				this.$refs.uToast.show({
					type: 'error',
					message: "有点未知错误，请刷新后重试...",
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-play {
		width: 580rpx;
		height: 580rpx;
		background: url(~@/static/disc.png);
		background-size: cover;
		margin: 214rpx auto 0 auto;
		position: relative;
		
		& image {
			width: 370rpx;
			height: 370rpx;
			border-radius: 50%;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			
			animation:10s linear move infinite;
			animation-play-state: paused;
		}
		
		& .detail-play-run {
			animation-play-state: running;
		}
		
		
		
		& text {
			width: 100rpx;
			height: 100rpx;
			font-size: 100rpx;
			color: white;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
		
		& view {
			width: 230rpx;
			height: 360rpx;
			background: url(../../static/needle.png);
			position: absolute;
			left: 100rpx;
			top: -200rpx;
			right: 0;
			margin: auto;
			background-size: cover;
		}
	}
	
	.detail-lyric {
		font-size: 32rpx;
		line-height: 82rpx;
		height: 246rpx;
		text-align: center;
		overflow: hidden;
		color:#6f6e73;
		
		&-wrap {
			transition: .5s;
			
			&-item {
				height: 82rpx;
				
				&.active {
					color: white;
				}
			}
		}
	}

	.detail-like {
		margin: 0 30rpx;
		
		&-head {
			font-size: 36rpx;
			align-items: center;
			margin: 50rpx 0;
			color: white;
		}
		
		&-item {
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;
			
			&-img {
				width: 82rpx;
				height: 82rpx;
				border-radius: 20rpx;
				overflow: hidden;
				margin-right: 20rpx;
				
				& image {
					width:100%;
					height: 100%;
				}
			}
			
			&-song {
				flex: 1;
				color: #c6c2bf;
				
				& view:nth-child(1) {
					font-size: 28rpx;
					color: white;
					margin-bottom: 12rpx;
				}
				
				& view:nth-child(2) {
					font-size: 22rpx;
				}
				
				& image {
					width: 26rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}
			}
			
			& text {
				font-size: 50rpx;
				color:#c6c2bf;
			}
		}
	}

	.detail-comment {
		margin: 0 30rpx;
		
		&-head {
			font-size: 36rpx;
			color: white;
		}
		
		&-item {
			margin-top: 28rpx;
			margin-bottom: 28rpx;
			display: flex;
			
			&-img {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 18rpx;
				
				& image {
					width: 100%;
					height: 100%;
				}
			}
			
			&-content {
				flex: 1;
				color: #cbcacf;
				
				&-title {
					&-content {
					display: flex;
					justify-content: space-between;
					
						&-name {
							& view:nth-child(1) {
								font-size: 26rpx;
							}
							
							& view:nth-child(2) {
								font-size: 20rpx;
							}
						}
					}
					
					&-like {
						font-size: 28rpx;
					}
					
					&-text {
						font-size: 28rpx;
						line-height: 40rpx;
						color: white;
						margin-top: 20rpx;
						border-bottom: 1px #e0e0e0 solid;
						padding-bottom: 40rpx;
					}
				}
			}
		}
	}
	
	@keyframes move {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>
